<template>
  <el-dialog :draggable=true :model-value="resetPasswordVisible" title="请输入密码信息" width="500"
             @close="handleClose">
    <template #footer>
      <div class="dialog-footer">
        <el-form
            ref="ruleFormRef"
            :model="resetPasswordBody"
            class="demo-ruleForm"
            label-width="auto"
            status-icon
            style="max-width: 600px"
        >
          <el-form-item label="用户名">
            <el-input v-model="props.userInfo.username" disabled/>
          </el-form-item>
          <el-form-item label="昵称">
            <el-input v-model="props.userInfo.nickname" disabled/>
          </el-form-item>
          <!--          非管理员才需要提供旧密码-->
          <el-form-item v-if="!isAdmin" label="原密码">
            <el-input v-model="resetPasswordBody.previousPassword" placeholder="请输入旧密码" type="password"
                      @blur="handleResetPasswordValid"/>
          </el-form-item>
          <el-form-item label="新密码">
            <el-input v-model="resetPasswordBody.newPassword" placeholder="请输入新密码"/>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm()">
              重置密码
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </template>
  </el-dialog>

</template>

<script lang="ts" setup>
import {ref, defineProps, withDefaults, defineEmits, onMounted} from 'vue'
import type {FormInstance} from 'element-plus'
import {editSysUser, resetPassword, resetPasswordValid} from "@/api/system/sysUser";
import {ElMessage} from "element-plus";
import {getAllRoleList} from "@/api/system/sysRole";
import {message} from "@/utils/ElmessasgeUtils";
import {getUserInfo} from "@/utils/system";

const emit = defineEmits(['update:resetPasswordVisible', "close"])

const ruleFormRef = ref<FormInstance>()


type resetPasswordInfo = {
  previousPassword: string
  newPassword: string
  userId: string
}

const props = withDefaults(
    defineProps<{
      userInfo: any
      resetPasswordVisible: boolean
    }>(),
    {
      resetPasswordVisible: false
    })
const formData = ref(props.userInfo)


const resetPasswordBody = ref<resetPasswordInfo>({
  previousPassword: '',
  newPassword: '',
  userId: props.userInfo.userId
})

const isAdmin = (getUserInfo().roleId === 1)

function handleResetPasswordValid() {
  if (resetPasswordBody.value.previousPassword !== '') {
    resetPasswordValid({userId: props.userInfo.userId, previousPassword: resetPasswordBody.value.previousPassword})
        .then((res: any) => {
          if (res.data.code !== 200) {
            message(res.data.msg, 'error')
          } else {
            message("密码校验成功")
          }
        })
  }
}

function handleClose() {
  emit('update:resetPasswordVisible', false)
  emit("close")
}

const submitForm = () => {

  resetPasswordBody.value.userId = props.userInfo.userId
  resetPassword(resetPasswordBody.value).then(res => {
    if (res.data.code !== 200) {
      message(res.data.msg, 'error');
    } else {
      message('重置密码成功', 'success');
      emit('update:resetPasswordVisible', false)
      emit("close")
    }
  })
}


</script>